<template>
  <!-- Card -->
  <f7-page>
    <f7-navbar title="Card" back-link="返回" no-hairline no-shadow></f7-navbar>

    <f7-block-title>Simple Cards</f7-block-title>
    <f7-card content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."></f7-card>

    <f7-card title="Card header" content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions." footer="Card footer"></f7-card>

    <f7-block-title>Outline Cards</f7-block-title>
    <f7-card outline content="This is a simple card with plain text, but cards can also contain their own header, footer, list view, image, or any other element."></f7-card>

    <f7-card outline title="Card header" content="Card with header and footer. Card headers are used to display card titles and footers for additional information or just for custom actions." footer="Card footer"></f7-card>

    <f7-block-title>Styled Cards</f7-block-title>
    <f7-card class="demo-card-header-pic">
      <f7-card-header class="no-border" valign="bottom" style="background-image:url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg);height: 130px;color:#fff">Journey To Mountains</f7-card-header>
      <f7-card-content>
        <p class="date">Posted on January 21, 2015</p>
        <p>Quisque eget vestibulum nulla. Quisque quis dui quis ex ultricies efficitur vitae non felis. Phasellus quis nibh hendrerit...</p>
      </f7-card-content>
      <f7-card-footer>
        <f7-link>Like</f7-link>
        <f7-link>Read more</f7-link>
      </f7-card-footer>
    </f7-card>

    <f7-card expandable>
      <f7-card-content :padding="false">
        <div class="bg-color-orange" style="height: 300px">
          <f7-card-header text-color="black" class="display-block">
            Framework7
            <br />
            <small style="opacity: 0.7">Build Mobile Apps</small>
          </f7-card-header>
          <f7-link card-close color="black" class="card-opened-fade-in" style="position: absolute;right: 15px; top: 15px;}" icon-f7="close_round_fill"></f7-link>
        </div>
        <div class="card-content-padding">
          <p>Framework7 - is a free and open source HTML mobile framework to develop hybrid mobile apps or web apps with iOS or Android (Material) native look and feel...</p>
        </div>
      </f7-card-content>
    </f7-card>
  </f7-page>
</template>

<script>
export default {
  name: 'Card'
}
</script>
